<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="Hosto, Photography, Photo Images, Responsive, Business, Corporate, Gallery, Notebook" />
<meta name="description" content="Hosto" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="js/superfish/superfish.css" rel="stylesheet" type="text/css" media="screen" />
<link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<link href="settings/styling.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="#" href="#" />
<link rel="shortcut icon" href="#" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/nav-small.js"></script>
<script type="text/javascript" src="js/scrolltop.js"></script>
<script type="text/javascript" src="js/flickr/jflickrfeed.min.js"></script>
<script type="text/javascript" src="js/flickr/setup.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="js/superfish/superfish.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/tipsy/jquery.tipsy.js"></script>
<script type='text/javascript'>
	$(function() {    
		$('.sociable li a img').tipsy({gravity: 'n'});		
	});
</script>
<script type="text/javascript" src="js/selectbox.js"></script>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript">
	jQuery(function($){
		$("#tweet").tweet({
			avatar_size: 32,
			count: 2,
		query: "themeforest",
		loading_text: "Loading Tweets..."
		});
	});
</script>
<title>Hosto</title>
</head>
<body>
<!--HEADER-->
<div id="header" class="clear">
  <div class="header-wrapper">
    <!--LOGO-->
    <div class="logo">
      <h1><a href="index.html"><img src="img/logo.png" alt="" title="" /></a></h1>
    </div>
    <!--MENU-->
    <nav id = "main-nav-menu">
      <ul class="sf-menu">
        <li><a href="index.html">Home</a>
          <ul>
            <li><a href="index.html">Main Homepage</a></li>
            <li><a href="index-scrolling.html">Scrolling Homepage</a></li>
            <li><a href="index-hosting.html">Hosting Homepage 1</a></li>
            <li><a href="index-hosting2.html">Hosting Homepage 2</a></li>
            <li><a href="index-beauty.html">Beauty Homepage</a></li>
            <li><a href="index-alternate.html">Sidebar Homepage</a></li>
            <li> <a href="#">Sliders</a>
              <ul>
                <li><a href="index-flex.html">FlexSlider</a></li>
                <li><a href="index-nivo.html">Nivo Slider</a></li>
                <li><a href="index-coin.html">Coin Slider</a></li>
                <li><a href="index-elasticslide.html">Elastic Slider</a></li>
                <li><a href="index-alternate.html">Image Rotator</a></li>
                <li><a href="index-slideshow.html">Simple Slideshow</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="active"><a href="#">Pages</a>
          <ul>
            <li><a href="#">Fullwidth Pages</a>
              <ul>
                <li><a href="about-fullwidth.html">About Fullwidth</a></li>
                <li><a href="services-fullwidth.html">Services Fullwidth</a></li>
                <li><a href="product-fullwidth.html">Product Fullwidth</a></li>
                <li><a href="price-fullwidth.html">Price Fullwidth</a></li>
                <li><a href="price-chart-fullwidth.html">Price Chart</a></li>
                <li><a href="404-page.html">404 Page</a></li>
                <li><a href="fullwidth.html">Fullwidth</a></li>
              </ul>
            </li>
            <li><a href="#">Right Sidebar Pages</a>
              <ul>
                <li><a href="about.html">About Sidebar</a></li>
                <li><a href="services.html">Services Sidebar</a></li>
                <li><a href="product.html">Product Sidebar</a></li>
                <li><a href="price.html">Price Sidebar</a></li>
              </ul>
            </li>
            <li><a href="#">Left Sidebar Pages</a>
              <ul>
                <li><a href="left-sidebar.html">Left Sidebar</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="#">Elements</a>
          <ul>
            <li><a href="elements.html">Elements</a></li>
            <li><a href="#">Other Elements</a>
              <ul>
                <li><a href="headings.html">Headings</a></li>
                <li><a href="blockquotes.html">Blockquotes</a></li>
                <li><a href="dropcaps.html">Dropcaps</a></li>
                <li><a href="list-icons.html">List Icons</a></li>
                <li><a href="buttons.html">CSS3 Buttons</a></li>
                <li><a href="notification.html">Notifications</a></li>
                <li><a href="tables.html">Tables</a></li>
                <li><a href="tabs-accordion.html">Tabs &amp; Accordion</a></li>
                <li><a href="columns-fullwidth.html">Columns Fullwidth</a></li>
                <li><a href="columns.html">Columns Left Sidebar</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Gallery</a>
          <ul>
            <li><a href="#">Gallery Fullwidth</a>
              <ul>
                <li><a href="gallery-1col-fullwidth.html">One Column Fullwidth</a></li>
                <li><a href="gallery-2cols-fullwidth.html">Two Columns Fullwidth</a></li>
                <li><a href="gallery-3cols-fullwidth.html">Three Columns Fullwidth</a></li>
                <li><a href="gallery-4cols-fullwidth.html">Four Columns Fullwidth</a></li>
              </ul>
            </li>
            <li><a href="#">Gallery Sidebar</a>
              <ul>
                <li><a href="gallery-1col.html">One Column</a></li>
                <li><a href="gallery-2cols.html">Two Columns</a></li>
                <li><a href="gallery-3cols.html">Three Columns</a></li>
              </ul>
            </li>
            <li><a href="#">Gallery Filterable</a>
              <ul>
                <li><a href="gallery-2cols-filterable-fullwidth.html">Two Column Fullwidth</a></li>
                <li><a href="gallery-3cols-filterable-fullwidth.html">Three Columns Fullwidth</a></li>
                <li><a href="gallery-4cols-filterable-fullwidth.html">Four Columns Fullwidth</a></li>
                <li><a href="gallery-1col-filterable.html">One Columns Sidebar</a></li>
                <li><a href="gallery-2cols-filterable.html">Two Columns Sidebar</a></li>
                <li><a href="gallery-3cols-filterable.html">Three Columns Sidebar</a></li>
              </ul>
            </li>
            <li><a href="gallery-carousel.html">Carousel Gallery</a></li>
            <li><a href="gallery-montage.html">Montage Gallery</a></li>
          </ul>
        </li>
        <li><a href="#">Blog</a>
          <ul>
            <li><a href="blog-list.html">List Style</a></li>
            <li><a href="blog-grid.html">Grid Style</a></li>
            <li><a href="blog-list-alternate.html">Alternate Style</a></li>
            <li><a href="single.html">Single Page</a></li>
          </ul>
        </li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <!-- end menu -->
    <select id = "responsive-main-nav-menu" onchange = "javascript:window.location.replace(this.value);"></select>
  </div>
  <div class="clear"></div>
</div>
<!--WELCOME-->
<div class="heading-top">
  <h2>Elements <span>Price</span></h2>
  <div id="myslides1">
    <label>&mdash; The Extensio is a simple and clean template suitable for companies </label>
    <label>&mdash; Welcome to our website - a Business HTML Template</label>
    <label>&mdash; We design, develop and deliver beautiful websites and mobile applications.</label>
    <label>&mdash; Welcome to our website - a Business HTML Template</label>
  </div>
</div>
<!--SITE CONTAINER-->
<div id="container">
  <!--SITE CONTENTS-->
  <div id="contents" class="clear">
    <!--MAIN CONTENT-->
    <div class="main-content">
      <!--ABOUT-->
      <div class="welcome">
        <h2>About Product</h2>
        <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
      </div>
      <!--NOTIFY-->
      <div class="br-bot">
        <div class="notify clear">
          <h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor</h2>
          <span><a href="#" class="btn">Purchase Now</a></span> </div>
      </div>
      <!--Product Table-->
      <div class="br-bot clear">
        <h3>Price List</h3>
        <ul class="list">
          <li><a href="#">Vestibulum iaculis lacinia est</a><span>$ 100.50</span></li>
          <li><a href="#">Proin dictum elementum velit</a><span>$ 200.50</span></li>
          <li><a href="#">Fusce euismod consequat ante</a><span>$ 300.50</span></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a><span>$ 230.50</span></li>
          <li><a href="#">Consectetuer adipiscing elit</a><span>$ 400.50</span></li>
          <li><a href="#">Pellentesque sed dolor</a><span>$ 240.50</span></li>
          <li><a href="#">Aliquam congue fermentum nisl</a><span>$ 270.50</span></li>
          <li><a href="#">Mauris accumsan nulla vel diam</a><span>$ 340.50</span></li>
          <li><a href="#">Sed in lacus ut enim adipiscing</a><span>$ 640.50</span></li>
          <li><a href="#">Nulla sed adipiscing venenatis</a><span>$ 140.50</span></li>
          <li><a href="#">In pede mi, aliquet sit amet</a><span>$ 170.50</span></li>
          <li><a href="#">Euismod in,auctor ut, ligula</a><span>$ 160.50</span></li>
        </ul>
      </div>
      <!--Product Table-->
      <div class="br-bot clear">
        <h3>Product Table</h3>
        <div class="rate-table">
          <!--TABLES-->
          <table class="table-style2">
            <thead>
              <tr>
                <th></th>
                <th>Pack 1</th>
                <th>Pack 2</th>
                <th>Pack 3</th>
                <th>Pack 4</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text">Pack 1</td>
                <td class="t-align"><img style="" alt="" src="img/icons/xtick.png" original-title=""></td>
                <td class="t-align"><img style="" alt="" src="img/icons/xtick.png" original-title=""></td>
                <td class="t-align"><img style="" alt="" src="img/icons/xtick.png" original-title=""></td>
                <td class="t-align"><img style="" alt="" src="img/icons/xtick.png" original-title=""></td>
              </tr>
              <tr>
                <td class="text">Pack 2</td>
                <td class="t-align"><img style="" alt="" src="img/icons/xtick.png" original-title=""></td>
                <td class="t-align"><img style="" alt="" src="img/icons/xtick.png" original-title=""></td>
                <td class="t-align"><img style="" alt="" src="img/icons/xtick.png" original-title=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xcross.png" alt="" style=""></td>
              </tr>
              <tr>
                <td class="text">Pack 3</td>
                <td class="t-align"><img original-title="" src="img/icons/xtick.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xtick.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xcross.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xtick.png" alt="" style=""></td>
              </tr>
              <tr>
                <td class="text">Pack 4</td>
                <td class="t-align"><img original-title="" src="img/icons/xtick.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xtick.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xtick.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xcross.png" alt="" style=""></td>
              </tr>
              <tr>
                <td class="text">Pack 5</td>
                <td class="t-align"><img original-title="" src="img/icons/xtick.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xcross.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xcross.png" alt="" style=""></td>
                <td class="t-align"><img original-title="" src="img/icons/xcross.png" alt="" style=""></td>
              </tr>
              <tr>
                <td class="text">Rates</td>
                <td class="rates">$160</td>
                <td class="rates">$130</td>
                <td class="rates">$70</td>
                <td class="rates">$30</td>
              </tr>
              <tr class="tr-none-3">
                <td></td>
                <td><a class="round table-button" href="#">Buy now</a></td>
                <td><a class="round table-button" href="#">Buy now</a></td>
                <td><a class="round table-button" href="#">Buy now</a></td>
                <td><a class="round table-button" href="#">Buy now</a></td>
              </tr>
              <tr class="tr-none-1 tr-none-2">
                <td></td>
                <td><a class="round table-button" href="#">Buy</a></td>
                <td><a class="round table-button" href="#">Buy</a></td>
                <td><a class="round table-button" href="#">Buy</a></td>
                <td><a class="round table-button" href="#">Buy</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!--TEAM-->
      <div class="team">
        <h3>Meet Our Team</h3>
        <ul class="clear">
          <li> <img src="img/team/mark.jpg" alt="" title="" />
            <h5>Mark Abucayon</h5>
          </li>
          <li> <img src="img/team/tina.jpg" alt="" title="" />
            <h5>Tina Turner</h5>
          </li>
          <li> <img src="img/team/james.jpg" alt="" title="" />
            <h5>James Smith</h5>
          </li>
          <li class="last"> <img src="img/team/jessica.jpg" alt="" title="" />
            <h5>Jessica White</h5>
          </li>
        </ul>
        <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem </p>
      </div>
      <!--SKILLS, TESTIMONIALS and HOW WE WORK-->
      <div class="cols-wrap clear">
        <!--SKILLS-->
        <div class="skills">
          <h3>Our Skills</h3>
          <ul>
            <li>
              <h5>Express Manicure</h5>
              <p>Lorem ipsum dolor sit amet, iuvaret tibique mi at dicant adolescens id vel, dicam invidunt torquatos duo</p>
            </li>
            <li>
              <h5>Express Pedicure</h5>
              <p>Lorem ipsum dolor sit amet, iuvaret tibique mi at dicant adolescens id vel, dicam invidunt torquatos duo ne, ut noluisse molestiae maiestatis per</p>
            </li>
          </ul>
        </div>
        <!--TESTIMONIALS-->
        <div class="testimonials">
          <h3>Testimonials</h3>
          <ul>
            <li>
              <p>Lorem ipsum dolor sit amet, iuvaret tibique mi at dicant adolescens id vel, dicam invidunt torquatos duo ne, ut</p>
              <span>John Doe</span> </li>
            <li>
              <p>Lorem ipsum dolor sit amet, iuvaret tibique mi at dicant adolescens id vel, dicam invidunt torquatos duo ne, ut</p>
              <span>John Doe</span> </li>
          </ul>
        </div>
        <!--HOW WE WORK-->
        <div class="how-we-work border-none last">
          <h3>How We Work</h3>
          <ul>
            <li>
              <label><span>1</span></label>
              <p>Maecenas consequat libero mattis nisl fringilla pretium. Aenean faucibus, volutpat hendrerit, lectus lorem.</p>
            </li>
            <li>
              <label><span>2</span></label>
              <p>Maecenas consequat libero mattis nisl fringilla pretium. Aenean faucibus, volutpat hendrerit, lectus lorem.</p>
            </li>
          </ul>
        </div>
      </div>
      <!--HISTORY-->
      <div class="history">
        <h3>Our History</h3>
        <p>Lorem ipsum dolor sit amet, iuvaret tibique mi at dicant adolescens id vel, dicam invidunt torquatos duo ne, ut noluisse molestiae maiestatis per corpora efficianture. Sed interdum nisl pharetra ipsum aliquet tempus. Mauris pulvinar, nisl nec auctor eleifend, felis leo aliquam purus, tristique semper purus nunc id ligula. Morbi a sem eros, at varius neque. Curabitur fermentum, velit laoreet feugiat consequat, ligula lorem porttitor arcu, nec malesuada enim magna vitae ligula. Proin diam augue, rhoncus nec venenatis ac, euismod vel metus. Donec vitae nulla velit, quis eleifend tortor.</p>
        <p>Vivamus scelerisque elit auctor ipsum lobortis consequat consequat lorem accumsan. Suspendisse turpis tortor, lobortis eget suscipit ac, vehicula venenatis mi. Integer aliquet dapibus diam, eu ornare tortor tincidunt eget. Mauris interdum felis ac lectus accumsan viverra. Curabitur dictum, tellus eget molestie aliquam, magna nibh lobortis tortor, in sodales neque nisi nec leo. Vestibulum lectus magna, tristique in scelerisque in, lacinia tincidunt nisi. Pellentesque sodales velit nec odio </p>
      </div>
    </div>
    <!--SIDEBAR-->
    <div class="sidebar">
      <!--SEARCH-->
      <div class="search">
        <h5>Search <span class="arrow">&nbsp;</span></h5>
        <div>
          <form action="#" method="post">
            <p>
              <input type="text" name="search" onfocus="if(this.value=='Search keyword and hit enter'){this.value='';}" onblur="if(this.value==''){this.value='Search keyword and hit enter';}" value="Search keyword and hit enter" />
            </p>
          </form>
        </div>
      </div>
      <!--SOCIABLE-->
      <div class="sociable">
        <h5>Find me here <span class="arrow">&nbsp;</span></h5>
        <ul class="clear">
          <li><a href="#"><img src="img/icons/dribbble.png" alt="" title="Dribbble" /></a></li>
          <li><a href="#"><img src="img/icons/facebook.png" alt="" title="Facebook" /></a></li>
          <li><a href="#"><img src="img/icons/twitter.png" alt="" title="Twitter" /></a></li>
          <li><a href="#"><img src="img/icons/gplus.png" alt="" title="Google Plus" /></a></li>
          <li><a href="#"><img src="img/icons/rss.png" alt="" title="Subscribe RSS" /></a></li>
          <li class="last"><a href="#"><img src="img/icons/flickr.png" alt="" title="Flickr" /></a></li>
        </ul>
      </div>
      <!--CATEGORIES-->
      <div class="categories">
        <h5>Categories <span class="arrow">&nbsp;</span></h5>
        <ul class="clear">
          <li><a href="#">Gel Polish</a></li>
          <li><a href="#">Stress-Free</a></li>
          <li><a href="#">Graft-a-Lash</a></li>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Simplification</a></li>
          <li><a href="#">Gel Polish</a></li>
          <li><a href="#">Stress-Free</a></li>
          <li><a href="#">Graft-a-Lash</a></li>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Simplification</a></li>
        </ul>
      </div>
      <!--SIDEBAR PARAGRAPH-->
      <div class="side-paragraph">
        <h5>Side Paragraph <span class="arrow">&nbsp;</span></h5>
        <div> <img src="img/simage.jpg" alt="" title="" />
          <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas. </p>
        </div>
      </div>
      <!--FLCKR PHOTOS-->
      <div class="flickr">
        <h5>Flickr Photos<span class="arrow">&nbsp;</span></h5>
        <div>
          <ul id="fbox" class="clear">
            <li class="empty">&nbsp;</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Footer-->
<div id="footer" class="clear">
  <!--BOTTOM COLUMNS-->
  <div id="footer-columns" class="clear">
    <div class="footer-wrapper">
      <!--TAGS-->
      <div class="tags">
        <h5>Tag Cloud</h5>
        <a href="#">Business</a> <a href="#">Corporate</a> <a href="#">Portfolio</a> <a href="#">Work</a> <a href="#">Template</a> <a href="#">Wordpress</a> <a href="#">Joomla</a> <a href="#">Drupal</a> <a href="#">Grow</a> <a href="#">Business</a> <a href="#">Corporate</a> <a href="#">Portfolio</a> <a href="#">Work</a> <a href="#">Template</a> <a href="#">Wordpress</a> <a href="#">Joomla</a> <a href="#">Drupal</a> <a href="#">Grow</a> </div>
      <!--ARCHIVES-->
      <div class="archive">
        <h5>Archives</h5>
        <ul>
          <li><a href="#">February 2013</a> (200)</li>
          <li><a href="#">January 2013</a> (50)</li>
          <li><a href="#">December 2011</a> (20)</li>
          <li><a href="#">November 2011</a> (20)</li>
          <li><a href="#">October 2011</a> (20)</li>
          <li><a href="#">September 2011</a> (20)</li>
        </ul>
      </div>
      <!--ABOUT-->
      <div class="about-brief">
        <h5>Text Widget</h5>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
      </div>
    </div>
  </div>
  <!--FOOTER-->
  <div id="footer-bot">
    <div class="footer-wrapper">
      <label>&copy; 2013. Hosto. All rights reserved.Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></label>
    </div>
  </div>
</div>
<a href="#" id="toTop">&uarr;</a>
<script type="text/javascript" src="js/custom.js"></script>
<!--FOR PREVIEW ONLY-->
<script type="text/javascript" src="settings/styleswitch.js"></script>


</body>
</html>
